<template>
  <view class="return-details-page" v-if="refundInfo.refundOrderNo">
    <view class="status-header">
      <view class="status-title" style="color: #fff;">{{ refundStatusText }}</view>
      <view class="status-description" style="color: #fff;">{{ refundStatusDescription }}</view>
    </view>

    <view class="card product-info-card">
      <view class="product-info">
        <image
          class="product-image"
          :src="refundInfo.image"
          mode="aspectFill"
        ></image>
        <view class="product-details">
          <view class="product-name">{{ refundInfo.productName }}</view>
          <view class="product-sku">{{ refundInfo.sku }}</view>
          <view class="product-price">¥ {{ refundInfo.productPrice }}</view>
        </view>
      </view>
      <view class="info-grid">
        <view class="info-row">
          <view class="info-label">退款件数:</view>
          <view class="info-value">{{ refundInfo.applyRefundNum }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">退款金额:</view>
          <view class="info-value">¥ {{ refundInfo.refundPrice }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">退款方式:</view>
          <view class="info-value">原路返回</view>
        </view>
        <view class="info-row">
          <view class="info-label">退款原因:</view>
          <view class="info-value">{{ refundInfo.refundReasonWap }}</view>
        </view>
      </view>
    </view>

    <view class="card after-sales-info-card">
      <view class="info-grid">
        <view class="info-row">
          <view class="info-label">售后单号:</view>
          <view class="info-value">
            {{ refundInfo.orderNo }}
            <view class="copy-btn" @click="copyText(refundInfo.orderNo)"
              >复制</view
            >
          </view>
        </view>
        <view class="info-row">
          <view class="info-label">售后单号:</view>
          <view class="info-value">
            {{ refundInfo.refundOrderNo }}
            <view class="copy-btn" @click="copyText(refundInfo.refundOrderNo)"
              >复制</view
            >
          </view>
        </view>
        <view class="info-row">
          <view class="info-label">申请时间:</view>
          <view class="info-value">{{ refundInfo.createTime }}</view>
        </view>
         <view class="info-row" v-if="refundInfo.reservationDoorStartTime">
          <view class="info-label">预约时间:</view>
          <view class="info-value">{{ refundInfo.reservationDoorStartTime }} - {{ refundInfo.reservationDoorEndTime.split(' ')[1] }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">售后类型:</view>
          <view class="info-value">{{ afterSalesTypeText }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">退回方式:</view>
          <view class="info-value">{{ returnGoodsTypeText }}</view>
        </view>
        <view class="info-row">
          <view class="info-label">备注说明:</view>
          <view class="info-value">{{
            refundInfo.refundReasonWapExplain || "/"
          }}</view>
        </view>
      </view>
    </view>

    <view class="card after-sales-info-card info-row" style="display: flex;align-items: center;">
      <view style="width: 70%">
        <view class="address_top">
          <text class="money">
            {{ refundInfo.consigneeDetailedAddress }}
          </text>
          <view> </view>
        </view>
        <view
          class="address_bottom"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view>
            <text class="money">
              {{ refundInfo.consigneeName }}
            </text>
            <span
              style="margin: 0 16rpx; color: #1296db"
              @tap.stop="makePhone(item.consigneePhone)"
            >
              {{ refundInfo.consigneePhone }}
            </span>
          </view>
        </view>
    </view>


        <view
          class="toAddress"
          @tap.stop="
            gomapApp(
              refundInfo.consigneeLatitude,
              refundInfo.consigneeLongitude,
              refundInfo.consigneeDetailedAddress
            )
          "
        >
          <image
            src="@/static/navigation.png"
            style="width: 26rpx; height: 26rpx"
          ></image
          ><span style="color: #1296db">导航</span>
        </view>
      </view>

    <view class="footer-actions" v-if="refundInfo.refundStatus === 0 && isdeliveryStaff">
      <view class="action-btn reject-btn" @click="handleRefuseRefund"
        >拒绝退款</view
      >
      <view class="action-btn agree-btn" @click="handleAgreeRefund"
        >同意退款</view
      >
    </view>

	 <view class="footer-actions" v-if="refundInfo.refundStatus === 8 && isdeliveryStaff">
      <view class="action-btn reject-btn" @click="makePhone(refundInfo.consigneePhone)"
        >联系客户</view
      >
      <view class="action-btn agree-btn" @click="confirmToDoor"
        >确认上门</view
      >
      <view class="action-btn agree-btn" @click="makePhone(refundInfo.deliveryPersonnelPhone)"
        >联系骑手</view
      >
    </view>
    <view class="footer-actions" v-if="refundInfo.refundStatus === 7 && !isdeliveryStaff">
       <button class="btn refuse-btn" @click.stop="markCode(refundInfo.refundOrderNo)">
            扫码分配
          </button>
    </view>
    <RefuseReasonDialog
      :show="refuseDialog"
      @close="handleRefuseClose"
      @submit="handleRefuseSubmit"
      :reasons="reasons"
    />
    <uni-popup
      ref="popup"
      type="center"
      background-color="#fff"
      border-radius="10px 10px 0 0"
    >
      <img :src="codeImg" />
    </uni-popup>
  </view>
</template>

<script>
// import { gomapApp,strToBase64Api } from "@/utils/utils";
import { gomapApp } from "@/utils/utils";
import RefuseReasonDialog from "@/components/RefuseReasonDialog.vue";
import { orderRefundInfoApi, refuseRefund, strToBase64Api } from "@/api";
export default {
  data() {
    return {
      refundInfo: {},
      refuseDialog: false,
      reasons: [
        "吊牌缺失 影响二次销售",
        "衣服损坏 影响二次销售",
        "尺码不合适 影响二次销售",
      ],
      codeImg: '',
    };
  },
  components: {
    RefuseReasonDialog,
  },
  onLoad(options) {
    this.getRefundInfo(options.refundOrderNo);
  },
  computed: {
     isdeliveryStaff() {
      return this.$store.state.app.userInfo.loginType == 1;
    },
    refundStatusText() {
      if (this.refundInfo.refundStatus === 0) {
        return "配送员审核中";
      } else if (this.refundInfo.refundStatus === 1) {
        return "拒绝退款";
      } else if (this.refundInfo.refundStatus === 2) {
        return "退款中";
      } else if (this.refundInfo.refundStatus === 3) {
        return "退款成功";
      } else if (this.refundInfo.refundStatus === 6) {
        return "撤销申请";
      }else if (this.refundInfo.refundStatus === 7) {
        return "待上门";
      }else if (this.refundInfo.refundStatus === 8) {
        return "上门中";
      }
      return "未知状态";
    },
    refundStatusDescription() {
      if (this.refundInfo.refundStatus === 0) {
        return "配送服务时间内配送员可审核售后申请";
      } else if (this.refundInfo.refundStatus === 1) {
        return this.refundInfo.refuseRefundReason;
      } else if (this.refundInfo.refundStatus === 2) {
        return "退款中";
      } else if (this.refundInfo.refundStatus === 3) {
        return "配送员现场通过用户的退款请求";
      } else if (this.refundInfo.refundStatus === 6) {
        return "此退款单已撤销申请";
      }else if (this.refundInfo.refundStatus === 7) {
        return "配送员上门审核售后申请";
      }else if (this.refundInfo.refundStatus === 8) {
        return "配送员上门审核售后申请";
      }
      return "";
    },
    afterSalesTypeText() {
      if (this.refundInfo.afterSalesType === 3) {
        return "现场退货退款";
      } else if (this.refundInfo.afterSalesType === 4) {
        return "上门退货退款";
      } else if (this.refundInfo.afterSalesType === 5) {
        return "上门换货";
      }
      return "未知类型";
    },
    returnGoodsTypeText() {
      if (this.refundInfo.returnGoodsType === 3) {
        return "现场退回";
      } else if (this.refundInfo.returnGoodsType === 4) {
        return "上门退回";
      }
      return "未知方式";
    },
  },
  methods: {
        markCode(text) {
      strToBase64Api({
        height: "250",
        text: text,
        width: "250",
      }).then((res) => {
        this.codeImg = res.data.code;
        this.$refs.popup.open();
      });
    },
    gomapApp(latitude, longitude, name) {
      gomapApp(latitude, longitude, name);
    },
    handleAgreeRefund() {
      // console.log(this.refundInfo,160);
      let params = {
        refundOrderNo: this.refundInfo.refundOrderNo,
        operateType: 2,
      };
      refuseRefund(params).then((res) => {
        console.log(res, 160);
        this.getRefundInfo(this.refundInfo.refundOrderNo);
      });
    },
    handleRefuseClose() {
      this.refuseDialog = false;
    },
    handleRefuseSubmit(reason) {
      console.log(reason, 160);
    },
    getRefundInfo(refundOrderNo) {
      orderRefundInfoApi(refundOrderNo)
        .then((res) => {
          console.log(res, 156);
          this.refundInfo = res.data;
          uni.setNavigationBarTitle({
            title: "售后详情",
          });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: function () {
          uni.showToast({
            title: "复制成功",
            icon: "success",
            duration: 1000,
          });
        },
      });
    },
	makePhone(phone) {
		uni.makePhoneCall({
			phoneNumber: phone,
		});
	},
	confirmToDoor() {
		confirmDoor(this.refundInfo.refundOrderNo).then(res => {
			uni.showToast({
				title: "确认上门成功",
				icon: "success",
			});
        this.getRefundInfo(this.refundInfo.refundOrderNo);

		});
	}
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.return-details-page {
  padding-bottom: 180rpx;
}

.status-header {
  background-color: #007aff;
  color: white;
  padding: 70rpx 40rpx;
  text-align: left;
}

.status-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.status-description {
  font-size: 24rpx;
}

.card {
  background-color: white;
  border-radius: 16rpx;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 30rpx;
}

.product-info {
  display: flex;
  align-items: flex-start;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 20rpx;
}

.product-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  background-color: #eee;
}

.product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 10rpx;
}

.product-sku {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 10rpx;
}

.product-price {
  font-size: 28rpx;
  color: #333;
}

.info-grid {
  font-size: 28rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  line-height: 2;
  color: #666;
}

.info-label {
  color: #888;
}

.info-value {
  color: #333;
  display: flex;
  align-items: center;
}

.copy-btn {
  font-size: 24rpx;
  color: #666;
  border: 1rpx solid #ccc;
  border-radius: 20rpx;
  padding: 2rpx 16rpx;
  margin-left: 16rpx;
}

.footer-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 45rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
}

.action-btn {
  min-width: 90rpx;
  max-width: 40vw;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 14rpx;
  border-radius: 10rpx;
  font-size: 22rpx;
  text-align: center;
  margin: 0;
  margin-bottom: 6rpx;
  margin-left: 16rpx;
  box-sizing: border-box;
  white-space: nowrap;
  flex: 0 1 auto;
  border: none;
}

.reject-btn {
  border: 1rpx solid #ccc;
  color: #333;
}

.agree-btn {
  background-color: #007aff;
  color: white;
  border: 1rpx solid #007aff;
}
</style>
